<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 206px;
            top: 150px;
            opacity: 1;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        // function sport(ele, types, target) {


        //获取当前元素的left值
        //当你传过来的是opacity 让目标值乘以100
        //     if (types === 'opacity') {
        //         target *= 100;
        //     }
        //     var timer = setInterval(() => {


        //         // 每次运动重新获取以此元素的left值
        //         // 如果是opacity 当前的结果也要乘以100
        //         var init;
        //         if (types == 'opacity') {
        //             init = window.getComputedStyle(ele)[types] * 100;
        //         } else {
        //             var init = parseInt(window.getComputedStyle(ele)[types]);
        //         }

        //         // 定义一个变量 存放每次的运动距离  
        //         var duration = (target - init) / 10;

        //         duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
        //         // 判断是否达到目标
        //         if (init == target) {
        //             clearInterval(timer)
        //         } else {
        //             if (types === 'opacity') {
        //                 ele.style[types] = (init + duration) / 100;

        //             } else {
        //                 ele.style[types] = init + duration + 'px';
        //             }

        //         }

        //     }, 10)

        // }


        // divele.onclick = ()=>{
        //     sport(divele,'opacity',0.1)
        // }

        // function sport(ele, types, target) {


        //     //获取当前元素的left值
        //     //当你传过来的是opacity 让目标值乘以100
        //     if (types === 'opacity') {
        //         target *= 100;
        //     }
        //     var timer = setInterval(() => {


        //         // 每次运动重新获取以此元素的left值
        //         // 如果是opacity 当前的结果也要乘以100
        //         var init;
        //         if (types == 'opacity') {
        //             init = window.getComputedStyle(ele)[types] * 100;
        //         } else {
        //             var init = parseInt(window.getComputedStyle(ele)[types]);
        //         }

        //         // 定义一个变量 存放每次的运动距离  
        //         var duration = (target - init) / 10;

        //         duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
        //         // 判断是否达到目标
        //         if (init == target) {
        //             clearInterval(timer)
        //         } else {
        //             if (types === 'opacity') {
        //                 ele.style[types] = (init + duration) / 100;

        //             } else {
        //                 ele.style[types] = init + duration + 'px';
        //             }

        //         }

        //     }, 10)

        // }

        var divele = document.querySelector('div');
        alert(divele);
        function sport1(ele, types,target){
                //获取当前元素的left值
                //当你传过来的是opacity 让目标值乘以100
                if (types === 'opacity') {
                    target *= 100;
                }
                var timer = setInterval(() => {
                    // 每次运动重新获取以此元素的left值
                    // 如果是opacity 当前的结果也要乘以100
                    var init;
                    if (types == 'opacity') {
                        init = window.getComputedStyle(ele)[types] * 100;
                        alert(init)
                    } else {
                        init = parseInt(window.getComputedStyle(ele)[types]);
                        alert(init)
                    }

                    // 定义一个变量 存放每次的运动距离  
                    var duration = (target - init) / 10;

                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
                    // 判断是否达到目标
                    if (init == target) {
                        clearInterval(timer)
                    } else {
                        if (types === 'opacity') {
                            ele.style[types] = (init + duration) / 100;

                        } else {
                            ele.style[types] = init + duration + 'px';
                        }

                    }

                }, 10)
            
        }
        divele.onclick = () => {
            sport1(this,'left',600)
        }
    </script>
</body>

</html>